<template>

	<uni-drawer ref="showDrawer" mode="right" :width="320" @change="changeDrawer($event,'showDrawer')">
		<view class="drawer-content">
			<view class="drawer-body">
				<uni-forms>

					<uni-forms-item label="性别">
						<view class="group-sex">
							<view v-for="(item,i) in sexList" key="i">
								<view v-if="item.value ===1" @click="sexIndex=1,query.sex=1">
									<text class="marry marry-a-06nanxingjiaose"
										:class="{'marray-active':sexIndex==1}"></text>
								</view>
								<view v-else @click="sexIndex=0,query.sex=0">
									<text class="marry marry-a-18nvxingjiaose"
										:class="{'marray-active':sexIndex==0}"></text>
								</view>
							</view>
						</view>
					</uni-forms-item>

					<uni-forms-item label="年龄">
						<slider-range :value="query.rangeValue" :min="20" :max="70" :step="1" :bar-height="3"
							:block-size="26" background-color="#EEEEF6" active-color="#FF6B00" :decorationVisible="true"
							@change="handleRangeChange"></slider-range>
					</uni-forms-item>
					<uni-forms-item label="省/市">
						<uni-data-select v-model="query.adress" :localdata="provideItems"
							@change="changeProvide"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="市/区">
						<uni-data-select v-model="query.city" :localdata="cityItems"
							@change="changeCity"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="县/镇">
						<uni-data-select v-model="query.xian" :localdata="xianItems"></uni-data-select>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="drawer-close">
				<button @click="closeDrawer('close')"><text class="word-btn-white">关闭</text></button>
				<button @click="closeDrawer('confirm')" type="primary"><text class="word-btn-white">确定</text></button>
			</view>
		</view>
	</uni-drawer>
</template>


<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import emun from "@/utils/index.js"
	import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'
	const provideCity = uniCloud.importObject("provideCity")
	const showDrawer = ref(null)
	const query = ref({
		sex: 0,
		adress: '',
		city: '',
		xian: '',
		rangeValue: []
	})
	const provideItems = ref([])
	const cityItems = ref([])
	const xianItems = ref([])
	const sexList = ref(emun.sexs)
	const sexIndex = ref(0)
	onMounted(() => {
		getProvide()
	})
	const getProvide = async () => {
		let res = await provideCity.getProvide()
		if (res && res.success) {
			let data = res.data.map((item) => {
				return {
					...item,
					value: item.code,
					text: item.name,
				}
			})
			provideItems.value = data
		}
	}
	const closeDrawer = (e) => {
		emits('closeDrawerData', query)
		showDrawer.value.close()
	}
	const changeDrawer = (e) => {
		console.log(e)
	}

	const commonCity = async (e, type) => {
		let res = await provideCity.getCity(e)
		if (res && res.success) {
			let data = res.data.map((item) => {
				return {
					...item,
					value: item.code,
					text: item.name,
				}
			})
			if (type === 'city') {
				cityItems.value = data
			} else {
				xianItems.value = data
			}
		}
	}
	const getCity = (e) => {
		commonCity(e, 'city')
	}
	const changeProvide = (e) => {
		query.value.city = '';
		query.value.xian = '';
		getCity(e)
	}
	const changeCity = (e) => {
		commonCity(e, 'xian')
		query.value.xian = '';
	}
	const handleRangeChange = (e) => {
		query.value.rangeValue = e
		console.log(e)
	}

	const emits = defineEmits(['closeDrawerData'])
	defineExpose({
		showDrawer
	})
</script>

<style lang="scss" scoped>
	.drawer-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;

		.drawer-body {
			padding: 36px 16px;
		}

		.drawer-close {
			display: flex;

			button {
				width: 100%;
				margin: 4px;
			}
		}

		.group-sex {
			display: flex;
			align-items: center;
			height: 100%;

			.marry {
				margin-right: 20px;
				border: 1px solid #ddd;
				padding: 9px;
				border-radius: 50%;
				font-size: 35px;
			}

			.marray-active {
				border: 1px solid #076fef;
			}
		}
	}
</style>